<template>
  <div v-if="isShow" class="good-game">
    <div class="box">
      <div class="top-box"> </div>
      <div class="bottom-box">
        <div class="text1">

        </div>
        <div class="text2"></div>
        <div class="message">
          <van-cell-group inset style="height:30%;margin-right:10%;margin-top:10%">
            <van-field
              v-model="currentMessage"
              rows="2"
              autosize
              label:false
              type="textarea"
              
              placeholder="请输入留言"
              show-word-limit
              class="text-user"
            />
          </van-cell-group>
        </div>
        <div class="backgroundColor"></div>
        <div class="text3"></div>
        <div class="submit" @click="submitMessage"></div>
      </div>
    </div>
  </div>

  <div class="scroll-container">
    <div class="index">
      <div class="home">
        <div class="back1">
          <div style="font-family:'Microsoft YaHei';font-weight:500;color:black;margin-bottom:35%">
            <div>恭喜你!</div>
            {{ randomMessage }}
          </div>
          <div class="back1-content">
            <van-image width="30" height="30" src="./星火.png" />
            <span style="color: black;">{{ correctUserCount }}/{{ correctQuestionCount }}</span>
          </div>
          <div style="margin-top: 70px;">
            <van-image width="180" src="./返回培训.png" @click="onClickLeft" />
          </div>
          <div style="margin-top: 10px;">
            <van-image  width="180" src="./下一题.png" @click="nextQuestion" />
          </div>
        </div>
        <!-- <div class="box">
          
          <div class="form">
            <div class="background1">
              <van-image
                width="150"
                height="150"
                src="src/assets/images/回答正确.png"
                style="margin: 40px 0"
              />
            </div>
            <div class="header">
              <h1>恭喜你</h1>
              <h2>{{message}}</h2>
            </div>
            <div class="back1">
              <div class="back1-content">
                <van-image
                  width="30"
                  height="30"
                  src="src/assets/images/星火.png"
                />
                <span style="color: black;">{{ correctUserCount }}/{{ correctQuestionCount }}</span>
              </div>
            </div>
          </div>
        </div>-->
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { routerKey, useRoute, useRouter } from "vue-router";
import { ref, reactive, onBeforeUpdate, onMounted } from "vue";
import axios from "axios";
import { useStore } from "vuex";

const store = useStore();
const questionCookie = ref("");
const router = useRouter();
const route = useRoute();
const userCookie = ref("");
const correctUserCount = ref("");
const correctQuestionCount = ref("");
const messages = ["成功取得星火"];
const randomMessage = ref("");
const currentMessage = ref('')
const isShow = ref(false)

const onClickLeft = () => history.back();
const nextQuestion = () => {
  console.log(store.state);
  if (store.state.qid !== (store.state.questionCount).toString()) {
    router.push("qid/" + (parseInt(store.state.qid) + 1).toString());
  } else{
    router.push("qid/1")
  }
  
};

const submitMessage= () =>{
  axios.post("http://192.168.137.1:8080/museums/userAnswer/addMessage",{
    currentUserName: userCookie.value,
    currentMessage : currentMessage.value
  }).then(res =>{
    console.log(res);
    history.back();
  })
}

onMounted(() => {
  randomMessage.value = getRandomMessage();
  // questionCookie.value = getCookie("firstQuestion");
  // if (questionCookie.value) {
  //   console.log("有cookie");
  // }

  let qid = store.state.qid;
  userCookie.value = getCookie("userName");
  axios
    .post("http://192.168.137.1:8080/museums/userAnswer/getUser", {
      currentUserName: userCookie.value
    })
    .then(res => {
      if (res.data.userAnswer.status === 1) {
        randomMessage.value = "取得全部星火!";
        isShow.value = true
      }
      correctUserCount.value = res.data.userAnswer.correctCount;
      correctQuestionCount.value = res.data.questionCount;
      store.commit('setQuestionCount',correctQuestionCount.value)

      // if (qid == correctQuestionCount.value) {
      //   questionCookie.value = false;
      // }
    });
});

function getRandomMessage() {
  const randomIndex = Math.floor(Math.random() * messages.length);
  return messages[randomIndex];
}

//获取cookie
const getCookie = name => {
  const cookieName = name + "=";
  const cookies = document.cookie.split(";");
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i];
    while (cookie.charAt(0) === " ") {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(cookieName) === 0) {
      return window.decodeURIComponent(
        cookie.substring(cookieName.length, cookie.length)
      );
    }
  }
  return "";
};
</script>
  
<style lang="less" scoped>

.good-game {
  background-image: url(/Ending页-20.jpg);
  background-size: 100% 100%;
  z-index: 1;
  height: 120%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow-x: hidden;
  justify-content: center;
  align-items: center;
}

.top-box{
  
  position: absolute;
  background-image: url(/未标题-1-22.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 50%;
  width: 100%;
  top: -1%; /* 从顶部开始 */
  left: 0; /* 从左侧开始 */
  z-index: 2; /* 将元素层级置于后面元素的上方 */
}

.bottom-box{
  position: absolute;
  background-image: url(/未标题-1-21.png);
  background-size: 100% 105%;
  background-repeat: no-repeat;
  
  height: 70%;
  width: 100%;
  bottom: 0; /* 从底部开始 */
  left: 0; /* 从左侧开始 */
  z-index: 1; /* 将元素层级置于前面元素的上方 */
}

.text1{
  
  position: absolute;
  background-image: url(/未标题-1-27.png);
  background-size: 80% ;
  background-repeat: no-repeat;
  height: 50%;
  width: 100%;
  top: 0;
  left:0;
  margin-top: 18%;
  margin-left: 10%;
  z-index: 3;
}

.text2{
  margin-top: 38%;
  margin-left: 10%;
  position: absolute;
  background-image: url(/未标题-1-28.png);
  background-size: 80% ;
  background-repeat: no-repeat;
  height: 50%;
  width: 100%;
  left: 0;
top: 0;
  z-index: 3;
}

.message{
  position: absolute;
  background-image: url(/未标题-1-23.png);
  background-size: 100% ;
  background-repeat: no-repeat;
  height: 50%;
  width: 80%;
  z-index: 3;
  bottom: 0;
  left: 0;
  margin-bottom: 18%;
  margin-left: 10%;
}


.backgroundColor{
  position: absolute;
  background-image: url(/未标题-1-24.png);
  background-size: 100% ;
  background-repeat: no-repeat;
  height: 50%;
  width: 87%;
  z-index: 2;
  bottom:0;
  left: 0;
  margin-bottom: 21%;
  margin-left: 6%;
}

.text3{
  
  position: absolute;
  background-image: url(/未标题-1-26.png);
  background-size: 60% ;
  background-repeat: no-repeat;
  height: 50%;
  width: 100%;
  bottom: 0;
  left:0;
  margin-bottom: -25%;
  margin-left: 18%;
  z-index: 3;
}

.submit{
  position: absolute;
  background-image: url(/未标题-1-25.png);
  background-size: 60% ;
  background-repeat: no-repeat;
  height: 50%;
  width: 100%;
  bottom: -39%;
  left:20%;
  z-index: 3;
}

.scroll-container {
  position: absolute; /* 添加绝对定位 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto; /* 允许纵向滚动 */
}
.home {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: 50px;
  margin-bottom: 15%;

}

.form {
  height: 70vh;
  padding: 40px;
  text-align: center;
}

.background1 {
  margin-bottom: 40px;
}

.header {
  margin-bottom: 20px;
  color: darkseagreen;
}

.back1 {
  width: 65%;
  font-size: 45px;
  margin-top: 73%;
}

.back1-content {
  margin-top: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index {
  height: 110%;
  display: flex;
  flex-direction: column;
  background-image: url(/回答正确.png);
  background-size: 100% 100%;
  background-position: px;
}
</style>